<script setup lang="ts">
import type {WorkbenchQuickNavItem} from '../typing';

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  JcxIcon,
} from '@/components/common/shadcn';

interface Props {
  items: WorkbenchQuickNavItem[];
  title: string;
}

defineOptions({
  name: 'WorkbenchQuickNav',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});

defineEmits(['click']);
</script>

<template>
  <Card>
    <CardHeader class="py-4">
      <CardTitle class="text-lg">{{ title }}</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-0">
      <template v-for="(item, index) in items" :key="item.title">
        <div
            :class="{
            'border-r-0': index % 3 === 2,
            'pb-4': index > 2,
            'border-b-0': index < 3,
          }"
            class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
            @click="$emit('click', item)"
        >
          <JcxIcon
              :color="item.color"
              :icon="item.icon"
              class="size-7 transition-all duration-300 group-hover:scale-125"
          />
          <span class="text-md mt-2 truncate">{{ item.title }}</span>
        </div>
      </template>
    </CardContent>
  </Card>
</template>
